<!--创建时间：2021/11/23 13:38 描述： -->
<template>
  <div class="form-class">
    <div class="form-btn">
      <el-form
        :model="form"
        class="show-form"
        label-width="100px"
        ref="FormRef"
        :rules="rules">
        <el-form-item label="表名称" prop="tableName">
          <el-input v-model="form.tableName"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-btn-all">
        <el-button type="primary" @click.stop="addTableRow">添加字段</el-button>
        <el-button type="success" @click.stop="save">保存</el-button>
      </div>
    </div>
    <ZhiXinTable
      :data="form.cols"
      :head="tableHead"
      ref="MyVxeTableRef"
      :edit="$route.query.dir !== PageLinkDir.LOOK"
      :edit-config="{
         mode: 'cell'
      }"
    >
      <template #toolbar="{row}">
        <el-button type="text" @click.stop="delRow(row)">删除</el-button>
      </template>
    </ZhiXinTable>
  </div>
</template>
<!--使用ts写vue，这里的语言要修改为ts，其他的位置没有改变，写tsx语言就改成tsx-->
<script lang="ts">
import { Component, Ref, Mixins } from 'vue-property-decorator'
import { EnumBaseValue, PageLinkDir } from '@/config/PageConfig'
import { FileTable, FileTableCol } from '@/views/dataSheet/DataConfig/FileTable'
import { MyVxeTableMethods, TableHeadItem } from '@/components/EditDataTable/DataType/Config'
import DataTypeMixin from '@/mixin/DataTypeMixin'
import FormValidator from '@/views/dataSheet/utils/FormValidator'
import typeOfUtils from '@/utils/type-of-utils'
import FileController from '@/controller/file-controller'
import { ElForm } from 'element-ui/types/form'
/* 这个装饰器里面写引入的组件和生命周期函数，当然，生命周期函数也是可以写在class类里面 */
@Component({
  components: {}
})
/* 这里定义的class一定要继承vue，记不住就直接模仿，class名就是之前的name属性值 */
export default class DataSheetform extends Mixins(DataTypeMixin) {
  private PageLinkDir = PageLinkDir
  private form: FileTable = {
    tableName: '',
    cols: [
      {
        isId: '0'
      }
    ]
  }

  private tableHead: TableHeadItem<FileTableCol>[] = [
    {
      label: '字段',
      prop: 'name',
      editRender: {
        name: 'ElInput',
        rules: [
          {
            required: true,
            validator: FormValidator.nameValidator(this.form.cols),
            trigger: 'change'
          }
        ]
      }
    },
    {
      label: '字段长度',
      prop: 'length',
      editRender: {
        name: 'ElInput',
        rules: [
          {
            required: true,
            validator: FormValidator.lengthValidator(this.dataType),
            trigger: 'change'
          }
        ]
      }
    },
    {
      label: '字段类型',
      prop: 'type',
      editRender: {
        name: 'ElSelect',
        options: [],
        props: {
          filterable: true
        },
        rules: [
          {
            required: true,
            validator: FormValidator.typeValidator(),
            trigger: 'change'
          }
        ]
      }
    },
    {
      label: '是否是id',
      prop: 'isId',
      editRender: {
        name: 'ElSelect',
        rules: [
          {
            required: true,
            validator: FormValidator.typeValidator(),
            trigger: 'change'
          }
        ],
        options: [
          {
            label: '是',
            value: '1'
          },
          {
            label: '否',
            value: '0'
          }
        ]
      }
    },
    {
      label: '字段描述',
      prop: 'description',
      editRender: {
        name: 'ElInput'
      }
    }
  ]

  private rules = {
    tableName: [
      { required: true, message: '表名称不能为空', trigger: ['change', 'blur'] }
    ]
  }

  dataTypeOptions(options: EnumBaseValue[]): void {
    const find = this.tableHead.find(i => i.prop === 'type')
    if (find && find.editRender) {
      this.$set(find.editRender, 'options', options)
    }
  }

  @Ref()
  private MyVxeTableRef!: MyVxeTableMethods<FileTableCol>

  @Ref()
  private FormRef!: ElForm

  created() {
    const query = this.$route.query
    if (query.dir === PageLinkDir.EDIT) {

    } else if (query.dir === PageLinkDir.ADD) {

    } else if (query.dir === PageLinkDir.LOOK) {

    }
  }

  addTableRow(): void {
    this.form?.cols?.push({
      isId: '0'
    })
  }

  save() {
    Promise.all([
      this.MyVxeTableRef.validate(),
      this.FormRef.validate()
    ]).then(() => {
      FileController.saveTable(this.form).then(res => {

      })
    })
  }

  delRow(row: FileTableCol) {
    this.$deleteTip().then(() => {
      const findIndex = this.form.cols?.findIndex(i => i.name === row.name)
      if (typeOfUtils.isNotEmpty(findIndex) && findIndex !== -1) {
        // @ts-ignore
        this.form.cols?.splice(findIndex, 1)
      }
    })
  }
}
</script>
<!--本地样式-->
<style scoped lang="scss">
.form-class {
  margin-top: 16px;

  .form-btn {
    display: flex;

    .show-form {
      width: 60%;
      margin-right: 10%;
    }

    .form-btn-all {

    }
  }
}
</style>
<!--全局样式-->
<style lang="scss">
</style>
